<template>
    <el-input
        v-model.trim="formData[item.prop]"
        :class="[item.type === 'textarea' ? 'use-form-textarea' : 'use-input']"
        :style="item.style ? item.style : { width: '100%' }"
        :type="item.type || 'text'"
        :placeholder="item.placeholder"
        :suffix-icon="item.suffixIcon"
        :prefix-icon="item.prefixIcon"
        :show-password="item.showPassword"
        :maxlength="item.maxlength"
        :rows="item.rows"
        :autosize="item.autosize"
        :resize="item.resize"
        :minlength="item.minlength"
        :show-word-limit="item.showWordLimit"
        :disabled="disabled || item.disabled"
        :readonly="readonly || item.readonly"
        :clearable="item.clearable"
        @change="change"
    >
        <template
            v-if="item.isAppend"
            #append
        >
            <slot :name="item.slotName" />
        </template>
    </el-input>
</template>
<script>
import { useFormProps, changeItem } from './useFormProps'
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'UseInput',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const change = () => {
            changeItem(context, props)
        }
        return {
            change
        }
    }
})
</script>

<style lang="scss" scoped>
.use-input {
  height: 32px;
}
.use-form-textarea {
  :deep(.el-textarea__inner) {
    height: 100%;
  }
}
</style>
